/**
 * 
 */
<template>
  <div id="qmviewer_container" style="height: 100%">
    <qmviewer
      v-bind:modelName="modelName"
      v-bind:isCompont="isCompont"
      v-bind:isLocal="isLocal"
      @callFather_loaded="callFather_loaded"
    ></qmviewer>

    <transition class="move_root">
      <!--    绑定style中top和left-->
      <div class="moveBox" :style="position" v-show="show">
        <div
          class="moveHead"
          @mousedown="mousedown"
          @mousemove="mousemove"
          @mouseup="mouseup"
          @mouseleave="mousemove"
        >
          {{ title }}
        </div>
        <!--      关闭按钮-->
        <div class="close" @click="toggleShow()">X</div>
        <div class="content">
          <!--插槽-->
          <slot>
            <p>该页面的源码都在gitee上</p>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onEvent1()"
            >
              土石方阶段
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onEvent2()"
            >
              主体结构阶段
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onEvent3()"
            >
              封顶阶段
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onEvent4()"
            >
              精装阶段
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onEvent5()"
            >
              设置颜色
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onEvent6()"
            >
              设置透明
            </button>
          </slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import qmviewer from "../../components/qmviewer";
import "../../css/lable.css";
export default {
  name: "Demo6",
  data() {
    return {
      //你需要打开的模型名称放这里。
      modelName: "/static/localmodel/" + "rac_basic_sample_project",
      isLocal: true,
      isCompont: true,
      //移动窗体的属性
      title: "施工常用接口",
      show: true, //是否显示
      x: 300, //left:x
      y: 60, //top:y
      leftOffset: 0, //鼠标距离移动窗口左侧偏移量
      topOffset: 0, //鼠标距离移动窗口顶部偏移量
      isMove: false, //是否移动标识
      //标签
      domMap: new Map(),
      qmodel_container: null,
    };
  },
  // 注册组件
  components: {
    qmviewer,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  beforeCreate() {},
  created() {
    //console.log(this._data);
  },
  computed: {
    //top与left加上px
    position() {
      return `top:${this.y}px;left:${this.x}px;`;
    },
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 模型加载完成事件
    callFather_loaded(parm) {
      var _this = this;
      _this.qmodel_container = document.getElementById("qmviewer_container");
      //通常情况下，qmodel是个全局变量，qmodel可直接使用。
      qmodel.set_mark_click_callback(function (cmpId, markId, pngIndex) {});
      qmodel.set_select_callback(function (id) {
        var cmps = JSON.parse(id);
        console.log(cmps);
      });
    },
    onEvent1() {
      //你要的ID，可以用上面的点击事件获取到。也可以在控制台输入qmodel.get_selection_ids()获得单选或框先的构件。
      //如果您要绑定进度用时间轴控制，则可以通过分类或者框选，获得ID数组跟业务进行绑定。有可能这里的数据量会比较大，注意存储的设计。
      qmodel.set_all_comps_visiblity(0, 0);
      var ids = [
        "0^7cce6b00-0763-4991-acce-01cfe02128f7-0007fb37",
        "0^d9a4583b-3667-47f2-9136-29137bbc6cf9-00077b4e",
        "0^ef4ad1cb-015c-4bb6-9030-e7bb82f1dd34-0006473c",
      ];
      qmodel.set_comps_visiblity(ids, true);
    },
    onEvent2() {
      qmodel.set_tree_visiblity(0, 511122, -2001300, true);
      qmodel.set_tree_visiblity(0, 511122, -2000032, true);
      qmodel.set_tree_visiblity(0, 311, -2000032, true);
      qmodel.set_tree_visiblity(0, 311, -2000011, true);
      qmodel.set_tree_visiblity(0, 311, -2001330, true);
      qmodel.set_tree_visiblity(0, 694, -2000011, true);
      qmodel.set_tree_visiblity(0, 245423, -2000032, true);
      qmodel.set_tree_visiblity(0, 245423, -2000011, true);
      qmodel.set_tree_visiblity(0, 245423, -2001330, true);
    },
    onEvent3() {
      var ids = ["0^a6aa132d-ccd7-408f-b2f9-ed67350c8c3a-0003b64a"];
      qmodel.set_comps_visiblity(ids, true);
      var camera1 =
        '{"eye":{"x":-65.30184107979557,"y":-77.27714835199805,"z":59.79005815005972},"center":[0.4197683763000484,-10.75654232501985,17.671263614186657],"up":{"x":0,"y":0,"z":1},"rotation":{"isEuler":true,"_x":1.0063441337893548,"_y":-0.6955641413324052,"_z":-0.3854504846640515,"_order":"XYZ"},"target":{"x":0.4197683763000484,"y":-10.75654232501985,"z":17.671263614186657}}';
      qmodel.set_camera_json(camera1);
    },
    onEvent4() {
      qmodel.set_all_comps_visiblity(1, true);
    },
    onEvent5() {
      var ids = ["0^c85e5be0-d8d5-4148-836f-b55e711ef373-00068454"];
      qmodel.set_comps_color(ids, 0x0000ff);
      ids = [
        "0^c85e5be0-d8d5-4148-836f-b55e711ef373-00068ac9",
        "0^ef57b02a-5e81-49e7-93bb-ae5f002d921c-00030826",
        "0^c85e5be0-d8d5-4148-836f-b55e711ef373-00068a2c",
      ];
      qmodel.set_comps_color(ids, 0xffff00);
    },
    onEvent6() {
      var ids = ["0^a6aa132d-ccd7-408f-b2f9-ed67350c8c3a-0003b64a"];
      qmodel.set_comps_transparency(ids, 0.5);
      ids = [
        "0^c85e5be0-d8d5-4148-836f-b55e711ef373-00068ac9",
        "0^ef57b02a-5e81-49e7-93bb-ae5f002d921c-00030826",
        "0^c85e5be0-d8d5-4148-836f-b55e711ef373-00068a2c",
      ];
      qmodel.set_comps_transparency(ids, 0.3, 0xffff00);
    },
    // 关闭编辑、增加弹出框
    closeDialog() {},
    //控制打开关闭
    toggleShow(data) {
      this.x = 100;
      this.y = 50;

      this.show = !this.show;
    },
    mousedown(event) {
      //鼠标按下事件
      this.leftOffset = event.offsetX;
      this.topOffset = event.offsetY;
      this.isMove = true;
    },
    //鼠标移动
    mousemove(event) {
      if (!this.isMove) {
        return;
      }
      this.x = event.clientX - this.leftOffset;
      this.y = event.clientY - this.topOffset;
    },
    //鼠标抬起
    mouseup() {
      this.isMove = false;
    },
  },
};
</script>
<style scoped>
.moveBox {
  width: 500px;
  height: 300px;
  position: fixed;
  z-index: 99998;
  background: rgb(255, 255, 255);
  box-shadow: 0 0 5px 3px #95a5a6;
}
.moveBox .moveHead {
  height: 35px;
  background-color: rgb(51, 65, 87);
  cursor: move;
  color: #fff;
  padding: 9px 0 0 11px;
}
.moveBox .close {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 30px;
  font-size: 24px;
  cursor: pointer;
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
}

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: scale(0.5);
}
.content {
  padding: 10px;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>

 
 